<template>
  <div class="m-content">
    <h2>
      <el-link type="primary" href="/info" style="font-size: xxx-large">{{ user.username }}</el-link>
      ，欢迎使用记账本
    </h2>
    <div class="block">
      <el-avatar :size="50" :src="user.avatar"></el-avatar>
    </div>
    <el-button @click="init();" style="position: fixed; bottom: 80px; left: calc(50% - 52px); z-index: 999"
               type="success"
               round><i class="el-icon-edit">记一笔</i></el-button>
    <div class="maction">
      <el-link type="primary" href="/index">
        <el-button class="menuitem">首页（账单）</el-button>
      </el-link>
      <el-link type="primary" href="/forms">
        <el-button class="menuitem">报表</el-button>
      </el-link>
      <el-link type="primary" href="/accounts">
        <el-button class="menuitem">资产</el-button>
      </el-link>
      <el-link type="primary" href="/info">
        <el-button class="menuitem">个人资料</el-button>
      </el-link>
      <span v-show="!hasLogin"><el-link type="primary" href="/login"><el-button type="success">登录</el-button></el-link></span>
      <span v-show="hasLogin"><el-link type="danger" @click="logout"><el-button
          type="danger">退出</el-button></el-link></span>
    </div>
    <!--记一笔 抽屉-->
    <el-drawer
        title="记一笔"
        :visible.sync="dialog"
        :before-close="handleClose"
        direction="btt"
        custom-class="demo-drawer"
        ref="drawer"
        size="50%"
    >
      <div class="demo-drawer__content">
        <el-form :model="form">

          <el-form-item label="金额" :label-width="formLabelWidth" required>
            <el-input v-model="form.money" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="form.remark" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="时间" :label-width="formLabelWidth">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.time" style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item label="分类" :label-width="formLabelWidth" required>
            <el-radio-group v-model="form.catename" size="medium">
              <el-radio v-for="item in catenames" border :label="item.name"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="资产账户" :label-width="formLabelWidth" required>
            <el-radio-group v-model="form.accountname" size="medium">
              <el-radio v-for="item in accountnames" border :label="item.name"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" @click="$refs.drawer.closeDrawer();" :loading="loading">
            {{ loading ? '提交中 ...' : '确 定' }}
          </el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      user: {
        username: '请先登录',
        avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
      },
      hasLogin: false,
      table: false,
      dialog: false,
      loading: false,
      form: {
        type: "1",
        money: "",
        time: this.getCurrentTime(),
        remark: "在星巴克购买咖啡",
        catename: "咖啡",
        accountname: "微信",
        bookname: "日常账本"
      },
      catenames: [{
        "id": 1,
        "typeId": 1,
        "userId": 1,
        "name": "咖啡",
        "icon": 0
      }],
      accountnames: [{
        "id": 1,
        "userId": 1,
        "name": "微信",
        "money": 456
      }],
      type: [],
      formLabelWidth: '80px',
      timer: null,
    }
  },
  methods: {
    init() {
      const _this = this
      _this.$axios.get("/catename").then(res => {
        // TODO: 分类（大类 --》 小类）
        this.catenames = res.data.data['支出'];
        console.log(this.catenames)
        console.log(res.data.data)
        this.dialog = true
      })
      _this.$axios.get("/account").then(res => {
        this.accountnames = res.data.data;
        console.log(this.accountnames)
        console.log(res.data.data)
        this.dialog = true
      })
    },
    logout() {
      const _this = this
      _this.$axios.get("/logout").then(res => {
        _this.$store.commit("REMOVE_INFO")
        _this.$router.push("/login")
      })
    },
    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$axios.post("/bill", this.form).then(res => {
        this.loading = true;
        this.timer = setTimeout(() => {
          done();
          // 动画关闭需要一定的时间
          setTimeout(() => {
            this.loading = false;
            this.getBills()
          }, 100);
        }, 200);
      }).catch(_ => {});
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },
    getCurrentTime() {
      var date = new Date();//当前时间
      var month = this.zeroFill(date.getMonth() + 1);//月
      var day = this.zeroFill(date.getDate());//日
      var hour = this.zeroFill(date.getHours());//时
      var minute = this.zeroFill(date.getMinutes());//分
      var second = this.zeroFill(date.getSeconds());//秒

      //当前时间
      var curTime = date.getFullYear() + "-" + month + "-" + day
          + "T" + hour + ":" + minute + ":" + second;

      return curTime;
    },
    zeroFill(i) {
      if (i >= 0 && i <= 9) {
        return "0" + i;
      } else {
        return i;
      }
    }
  },
  created() {
    if (this.$store.getters.getUser.username) {
      this.user.username = this.$store.getters.getUser.username
      this.user.avatar = this.$store.getters.getUser.avatar
      this.hasLogin = true
    }
  },
}
</script>
<style scoped>
.m-content {
  max-width: 960px;
  margin: 0 auto;
  background-color: #D3DCE6;
  text-align: center;
}

.maction {
  margin: 10px 0;
}

</style>